<template>
  <view class="mine">
    <uni-nav-bar @clickLeft="ui.back()" title="我的" :border='false' />
    <view style="height: 4rpx;">

    </view>
    <view class="userInfo">
      <image src="../static/logo.png" mode="" class="userInfo_img"></image>
      <view class="userInfo_name">
        张三三
      </view>
      <view class="userInfo_num">
        微信号：A3333
      </view>
      <u-icon class="userInfo_icon" name="arrow-right" color="#CDCDCD" size="40"></u-icon>
    </view>
    <view class="t-ju-between digitalInformation">
      <view class="t-center df_item" @click="open('/pagesUser/my/balance')">
        <view class="number">
          10
        </view>
        <view class="name">
          余额
        </view>
      </view>
      <view class="t-center df_item">
        <view class="number">
          10
        </view>
        <view class="name">
          积分
        </view>
      </view>
      <view class="t-center df_item">
        <view class="number">
          10
        </view>
        <view class="name">
          优惠券
        </view>
      </view>
    </view>
    <view class="orderStatus t-ju-between">
      <view class="os_item t-center">
        <image src="../static/logo.png" mode="" class="icon"></image>
        <view class="span">
          待付款
        </view>
      </view>
      <view class="os_item t-center">
        <image src="../static/logo.png" mode="" class="icon"></image>
        <view class="span">
          待发货
        </view>
      </view>
      <view class="os_item t-center">
        <image src="../static/logo.png" mode="" class="icon"></image>
        <view class="span">
          已发货
        </view>
      </view>
      <view class="os_item t-center">
        <image src="../static/logo.png" mode="" class="icon"></image>
        <view class="span">
          已完成
        </view>
      </view>
      <view class="os_item t-center">
        <image src="../static/logo.png" mode="" class="icon"></image>
        <view class="span">
          我的订单
        </view>
      </view>
    </view>
    <view class="cell">
      <u-cell-group :border="false">
        <u-cell-item title="收货地址" :border-bottom="false"></u-cell-item>
        <u-cell-item title="退出登录" :border-bottom="false"></u-cell-item>
      </u-cell-group>
    </view>
  </view>
</template>

<script setup>
  import ui from '@/utils/index.js'
  const open = (url) => {
    ui.push(url)
  }
</script>
<style lang="scss" scoped>
  .userInfo {
    width: 100%;
    position: relative;
    height: 120rpx;
    background-color: #fff;

    .userInfo_img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 30rpx;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
    }

    .userInfo_name {
      position: absolute;
      top: 20rpx;
      left: 125rpx;
      font-size: 28rpx;
    }

    .userInfo_num {
      position: absolute;
      font-size: 28rpx;
      top: 60rpx;
      left: 125rpx;
      color: #CDCDCD;
    }

    .userInfo_icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 30rpx;
    }
  }

  .digitalInformation {
    width: 100%;
    padding: 0 10rpx;
    box-sizing: border-box;
    height: 140rpx;
    background-color: #fff;

    .df_item {
      flex: 1;
      height: 100rpx;
      flex-wrap: wrap;

      .number,
      .name {
        width: 100%;
        font-size: 24rpx;
        text-align: center;
      }
    }
  }

  .orderStatus {
    width: 100%;
    height: 200rpx;
    background-color: #fff;

    .os_item {
      flex-wrap: wrap;

      .icon {
        width: 70rpx;
        height: 70rpx;
        border-radius: 50%;
      }

      .span {
        margin-top: 20rpx;
        width: 100%;
        font-size: 24rpx;
        text-align: center;
      }
    }

  }
</style>